<template>
    <div class="container">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Select clearable v-model="searchObj.type" style="width:200px" placeholder="请选择职权类型">
                        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.project_name" class="search-input" clearable placeholder="请输入职权名称"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.code" class="search-input" clearable placeholder="请输入职权编码"/>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="addAction">
                        <Icon type="md-add" />
                        添加
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-toolbar custom></vxe-toolbar>
            <vxe-table
                    border
                    resizable
                    :tooltip-config="{theme:'light',enterable:true, enabled: false}"
                    highlight-hover-row
                    size="medium"
                    :loading="tableLoading"
                    align="center"
                    header-align="center"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData"
                    :checkbox-config="{checkField: 'checked'}">
                <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                <vxe-table-column width="180" field="code" title="职权编码"></vxe-table-column>
                <vxe-table-column width="180" field="type" title="职权类型">
                    <template v-slot="{row}">
                        <span>{{powerList[row.type]}}</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column width="180" header-align="center" field="action_subject" title="决定机构">
                </vxe-table-column>
                <vxe-table-column width="180" field="project_name" title="职权名称"></vxe-table-column>
                <vxe-table-column width="180" field="subitem" title="职权子项名称"></vxe-table-column>
                <vxe-table-column minWidth="300" fixed="right" field="action" title="操作">
                    <template v-slot="{row}">
                        <ButtonGroup>
                            <Button type="info" size="small" class="action-btn"
                                    @click="editAction(row)">编辑
                            </Button>
                            <Button type="error" size="small" class="action-btn"
                                    @click="deleteAction(row.id)">删除
                            </Button>
                            <Button type="success" size="small" class="action-btn"
                                    @click="detailAction(row)">详情
                            </Button>
                            <Button v-has="'setting_mark'" type="primary" size="small" class="action-btn"
                                    @click="markAction(row)">留痕
                            </Button>
                        </ButtonGroup>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize"
                  :total="pageObj.totalRecord"
                  @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
        </Row>
        <option-modal ref="optionModal" :modalTitle="modalTitle" :modalWidth="modalWidth" :modalType="modalType"
                      :dataObj="dataObj" @saveOption="init"></option-modal>
    </div>
</template>

<script>
import {
  getGovPowersList
} from '@/api/setting/base-info'
import {
  delGovPowersData
} from '@/api/setting/powers-manage'
import OptionModal from './components/option-modal'
export default {
  components: { OptionModal },
  data () {
    return {
      searchObj: {},
      typeList: [
        {
          value: '1',
          label: '行政征收'
        },
        {
          value: '2',
          label: '行政裁决'
        },
        {
          value: '3',
          label: '行政给付'
        },
        {
          value: '4',
          label: '行政奖励'
        },
        {
          value: '5',
          label: '行政确认'
        },
        {
          value: '6',
          label: '行政许可'
        },
        {
          value: '7',
          label: '行政强制'
        },
        {
          value: '8',
          label: '行政检查'
        },
        {
          value: '9',
          label: '行政处罚'
        },
        {
          value: '10',
          label: '其他权力'
        }
      ],
      powerList: {
        1: '行政征收',
        2: '行政裁决',
        3: '行政给付',
        4: '行政奖励',
        5: '行政确认',
        6: '行政许可',
        7: '行政强制',
        8: '行政检查',
        9: '行政处罚',
        10: '其他权力'
      },
      tableLoading: false,
      tableData: [],
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      modalTitle: '',
      modalShow: false,
      modalWidth: 800,
      modalType: '',
      dataObj: {}
    }
  },
  computed: {
    company_name () {
      return this.$store.state.user.severUserInfo.data.company_name
    }
  },
  methods: {
    init () {
      const param = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        code: this.$common.xeUtils.trim(this.searchObj.code),
        type: this.$common.xeUtils.trim(this.searchObj.type),
        project_name: this.$common.xeUtils.trim(this.searchObj.project_name),
        subitem: this.$common.xeUtils.trim(this.searchObj.subitem),
        action_subject: this.$common.xeUtils.trim(this.searchObj.action_subject)
      }
      this.tableLoading = true
      getGovPowersList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.tableData.forEach((item) => {
            item.create_time = this.$common.xeUtils.toDateString(item.create_time)
          })
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    searchAction () {
      this.init()
    },
    addAction () {
      this.modalTitle = '添加职权事项'
      this.modalType = 'add'
      this.modalWidth = 1000
      this.dataObj = { action_subject: this.company_name }
      this.$refs.optionModal.modalAction()
      this.$refs.optionModal.handleReset()
    },
    editAction (val) {
      this.modalTitle = '编辑职权事项'
      this.modalType = 'edit'
      this.dataObj = this.$common.xeUtils.clone(val)
      this.$refs.optionModal.modalAction()
      this.$refs.optionModal.$refs.formItem.resetFields()
    },
    deleteAction (val) {
      this.$Modal.confirm({
        title: '确认删除？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.delOne(val)
        }
      })
    },
    delOne (val) {
      delGovPowersData({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.init()
          this.success('删除成功')
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    detailAction (val) {
      this.modalTitle = '查看职权事项详情'
      this.modalType = 'info'
      this.modalWidth = 1000
      this.dataObj = this.$common.xeUtils.clone(val)
      this.$refs.optionModal.modalAction()
    },
    markAction (row) {
      this.$router.push({ name: 'settingsMarkManager', query: { id: row.id } })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .action-btn {
        margin-right: 5px;
    }
    /deep/.ivu-btn-group .ivu-btn {
        border-radius: 3px !important;
    }
</style>
